// import logo from './logo.svg';
import React from 'react';
// import './App.css';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useRouteMatch
} from "react-router-dom";
// import { routes } from '../../routers/RouteConfig';
import { routes } from '../../routers/RouteConfig';
import { Menu, Button } from 'antd';
import {
    AppstoreOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    PieChartOutlined,
    DesktopOutlined,
    ContainerOutlined,
    MailOutlined,
} from '@ant-design/icons';
import "./LeftNav.css"

const { SubMenu } = Menu;


class LeftNav extends React.Component {
    state = {
        collapsed: false,
    };

    toggleCollapsed = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    render() {
        return (
            <Router>
                {/* <Header/> */}
                {/* 左侧导航 */}
                <div className="content" style={{ width: "100%", display: "flex" }}>
                    <div className="leftMenu" style={{ display: "flex", flex: 1, flexDirection: "column" }}>
                        <div className="topTitle">
                            <span>SDK</span>
                            <Button type="primary" onClick={this.toggleCollapsed} style={{ width: "50px" }}>
                                {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
                            </Button>
                        </div>
                        <div className="MenuComponent">
                            <Menu
                                defaultSelectedKeys={['1']}
                                // defaultOpenKeys={['sub1']}
                                mode="inline"
                                theme="dark"
                                inlineCollapsed={this.state.collapsed}
                            >
                                <Menu.ItemGroup key="g1" title="收藏夹">
                                    <Menu.Item key="1" icon={<PieChartOutlined />}>
                                        <Link to="/">首页</Link>
                                    </Menu.Item>
                                    <Menu.Item key="2" icon={<DesktopOutlined disabled />}>
                                        <Link to="/about">仪表盘</Link>
                                    </Menu.Item>
                                    <Menu.Item key="3" icon={<ContainerOutlined />}>
                                        <Link to="/about">用户会话</Link>
                                    </Menu.Item>
                                    <Menu.Item key="4" icon={<ContainerOutlined />}>
                                        <Link to="/about">网络请求</Link>
                                    </Menu.Item>
                                    <Menu.Item key="5" icon={<ContainerOutlined />}>
                                        <Link to="/about">视图启动</Link>
                                    </Menu.Item>
                                    <Menu.Item key="6" icon={<ContainerOutlined />}>
                                        <Link to="/about">应用奔溃</Link>
                                    </Menu.Item>
                                    <Menu.Item key="7" icon={<ContainerOutlined />}>
                                        <Link to="/about">请求错误</Link>
                                    </Menu.Item>
                                    <Menu.Item key="8" icon={<ContainerOutlined />}>
                                        <Link to="/about">JS错误</Link>
                                    </Menu.Item>
                                    <Menu.Item key="9" icon={<ContainerOutlined />}>
                                        <Link to="/about">卡顿分析</Link>
                                    </Menu.Item>
                                </Menu.ItemGroup>
                                <Menu.ItemGroup key="g2" title="数据">
                                    <Menu.Item key="10" icon={<PieChartOutlined />}>
                                        <Link to="/">首页</Link>
                                    </Menu.Item>
                                    <Menu.Item key="11" icon={<DesktopOutlined />}>
                                        <Link to="/about">关于我们</Link>
                                    </Menu.Item>
                                    <Menu.Item key="12" icon={<ContainerOutlined />}>
                                        Option 3
                                    </Menu.Item>
                                    <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
                                        <Menu.Item key="13">Option 5</Menu.Item>
                                        <Menu.Item key="14">Option 6</Menu.Item>
                                        <Menu.Item key="15">Option 7</Menu.Item>
                                        <Menu.Item key="16">Option 8</Menu.Item>
                                    </SubMenu>
                                    <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
                                        <Menu.Item key="17">Option 9</Menu.Item>
                                        <Menu.Item key="18">Option 10</Menu.Item>
                                        <SubMenu key="sub3" title="Submenu">
                                            <Menu.Item key="19">Option 11</Menu.Item>
                                            <Menu.Item key="20">Option 12</Menu.Item>
                                        </SubMenu>
                                    </SubMenu>
                                </Menu.ItemGroup>

                            </Menu>
                        </div>
                        {/* <div className="MenuComponent">
                            <h4>数据</h4>
                            <Menu
                                // defaultSelectedKeys={['1']}
                                // defaultOpenKeys={['sub1']}
                                mode="inline"
                                theme="dark"
                                inlineCollapsed={this.state.collapsed}
                            >

                            </Menu>
                        </div> */}

                    </div>
                    <div style={{ flex: 7, padding: "10px" }}>
                        <Switch>
                            {routes.map((route, index) => (
                                <Route
                                    key={index}
                                    path={route.path}
                                    exact={route.exact}
                                    children={<route.main />}
                                />
                            ))}
                        </Switch>
                    </div>
                </div>
            </Router>
        );
    }
}

// ReactDOM.render(<App />, mountNode);
export default LeftNav;
